<template>
  <div class="result-container">
    <div class="title-wrap">
      <h2 class="title">{{ $route.query.id }}</h2>
      <span class="sub-title">找到{{ count }}个结果</span>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="歌曲" name="songs">
        <table class="el-table">
          <thead>
            <th></th>
            <th>音乐标题</th>
            <th>歌手</th>
            <th>专辑</th>
            <th>时长</th>
          </thead>
          <tbody>
            <tr class="el-table__row" v-for="(k,index) in songList"
            :key="index"
            @dblclick="playMusic(k.id)"
            >
              <td>{{index+1}}</td>
              <td>
                <div class="song-wrap">
                  <div class="name-wrap">
                    <!-- 歌名 -->
                    <span>{{ k.name }}</span>
                    <!-- mv的图标 -->
                    <span v-if="k.mvid!=0" class="iconfont icon-mv"></span>
                  </div>
                  <!-- 二级标题 -->
                  <span>{{ k.alias[0] }}</span>
                </div>
              </td>
              <td>{{ k.artists[0].name }}</td>
              <td>{{ k.album.name }}</td>
              <td>{{ k.duration }}</td>
            </tr>
          </tbody>
        </table>
      </el-tab-pane>
      <el-tab-pane label="歌单" name="lists">
        <div class="items">
          <div  class="item" v-for="(k ,index) in playLists"
          :key="index"
          @click="toPlaylist(k.id)"
          >
            <div class="img-wrap">
              <div class="num-wrap">
                播放量:
                <span class="num">{{ k.playCount }}</span>
              </div>
              <img :src="k.coverImgUrl" alt="" />
              <span class="iconfont icon-play"></span>
            </div>
            <p class="name">{{ k.name }}</p>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="MV" name="mv">
        <div class="items mv">
          <div  class="item" v-for="(k,index) in mv" 
          :key="index"
          @click="tomv(k.id)">
            <div class="img-wrap">
              <img :src="k.cover" alt="" />
              <span class="iconfont icon-play"></span>
              <div class="num-wrap">
                <div class="iconfont icon-play"></div>
                <div class="num">{{ k.playCount }}</div>
              </div>
              <span class="time">{{k.duration }}</span>
            </div>
            <div class="info-wrap">
              <div class="name">{{ k.name }}</div>
              <div class="singer">{{ k.artistName }}</div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //当前tab栏
      activeName:'songs',
      //查询的音乐
      songList:[],
      //歌单的条数
      playLists:[],
      //mv的
      mv:[],
      //搜索总条数
      count:0
    }
  },
    created(){
        console.log(this.$route.query.id);
        this.scrMusic()
    },
    watch:{
      activeName(){
        //songs 歌曲   lists 歌单   mv   
        //type接口类型
        let type = 1
        //页面渲染个数
        let limit = 10
        switch(this.activeName){
          case 'songs':
            type=1
            limit=10
            break;
            case 'lists':
              type=1000
              limit = 10
              break;
              case 'mv':
                type = 1004
                limit = 8
                break;

                default:
                  break;
        }
        this.axios.get('search',{
          params:{
            keywords:this.$route.query.id,
            type,   //type:type
            limit   //limit:limit
          }
        }).then(res=>{
          //获取目标歌曲
          if(type == 1){
            this.songList = res.data.result.songs
            //歌曲时间处理
            for(let i =0;i<this.songList.length;i++){
            let min = parseInt(this.songList[i].duration/1000/60)
            let sec = parseInt(this.songList[i].duration/1000%60)
            if(min<10){
              min = '0'+min
            }
            if(sec<10){
              sec = '0'+sec
            }
            this.songList[i].duration = min+':'+sec
          }
          this.count = res.data.result.songCount
          }
          //获取目标歌单
          else if(type == 1000){
            this.playLists = res.data.result.playlists
            this.count = res.data.result.playlistCount
            for(let i=0;i<this.playLists.length;i++){
              if(this.playLists[i].playCount>10000){
                this.playLists[i].playCount = 
                parseInt(this.playLists[i].playCount/10000)+'万'
              }
            }
          }
          //获取目标mv
          else {
            this.mv = res.data.result.mvs
            this.count = res.data.result.mvCount
            for(let i=0;i<this.mv.length;i++){
              if(this.mv[i].playCount>10000){
                this.mv[i].playCount = 
                parseInt(this.mv[i].playCount/10000)+'万'
              }
              let min = parseInt(this.mv[i].duration/1000/60)
              let sec = parseInt(this.mv[i].duration/1000%60)
              if(min<10){
                min='0'+min
              }
              if(sec<10){
               sec='0'+sec
              }
              this.mv[i].duration = min+':'+sec
            }
          }
        })
      }
    },
    methods: {
      scrMusic(){
        this.axios.get('search',{
          params:{
            keywords:this.$route.query.id,
            type:1,
            limit:10,
          }
        }).then(res=>{
          console.log(res);
          this.songList = res.data.result.songs
          //歌曲时间处理
          for(let i =0;i<this.songList.length;i++){
            let min = parseInt(this.songList[i].duration/1000/60)
            let sec = parseInt(this.songList[i].duration/1000%60)
            if(min<10){
              min = '0'+min
            }
            if(sec<10){
              sec = '0'+sec
            }
            this.songList[i].duration = min+':'+sec
          }
          this.count = res.data.result.songCount
        })
      },
      //点击mv跳转详情页
      tomv(id){
        this.$router.push(`/mv?id=${id}`)
      },
      //跳转歌单页
      toPlaylist(id){
        this.$router.push(`/playlist?id=${id}`)
      },
      //播放单曲
      playMusic(id){
        this.axios.get('song/url',{
          params:{
            id //id:id
          }
        }).then(res=>{
          let url = res.data.data[0].url
          this.$emit("srcChange",url)
        })
      }
    },
}
</script>

<style>

</style>